<template>
  <Nav />
  <Menu />
  <Swiper />
  <div class="news-box">
    <img class="news-img" src="@/assets/bg1.png" alt="" />
    <div class="news">
      <div class="news-left" ref="newsLeft">
        <Title :title="'新闻动态'" :tit="'New & Events'" :more="true" />
        <div class="tran-box">
          <img class="news-img" src="@/assets/news.png" alt="" />
        </div>
        <div v-if="newsItems.length > 0">
          <div class="new-item" v-for="(item, index) in newsItems" :key="index" @click="shownews(index)">
            <div>{{ item.title }}</div>
            <div>{{ item.date }}</div>
          </div>
        </div>
      </div>
      <div class="news-center"></div>
      <div class="news-right" ref="newsRight">
        <Title :title="'活动预告'" :tit="'Event Preview'" :more="true" />
        <div class="right-box">
          <div class="new-item" v-for="(item, index) in eventItems" :key="index" @click="showModal(index)">
            <div>{{ item.title }}</div>
            <div>{{ item.date }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="news-box">
  <img class="news-img" src="@/assets/bg1.png" alt="" />
  <div class="news">
    <div class="news-leftbot" ref="newsLeftbot">
      <Title :title="'学术交流'" :tit="'Academic'" :more="true"/>
      <div class="tran-box">
        <img class="news-img" src="@/assets/news.png" alt="" />
      </div>
      <div v-if="acadItems.length > 0">
        <div class="new-item" v-for="(item, index) in acadItems" :key="index" @click="showacad(index)">
          <div>{{ item.title }}</div>
          <div>{{ item.date }}</div>
        </div>
      </div>
    </div>
    <div class="news-center"></div>
    <div class="news-right" ref="newsRightbot">
      <Title :title="'工作通知'" :tit="'Notices of work'" :more="true" />
      <div class="right-box">
        <div class="new-item" v-for="(item, index) in noticeItems" :key="index" @click="shownotice(index)">
          <div>{{ item.title }}</div>
          <div>{{ item.date }}</div>
        </div>
      </div>
    </div>
  </div>
</div>

  <div class="bg-box">
    <img class="bg-img" src="@/assets/bg2.png" alt="" />
    <div class="technology" ref="technology">
      <Title
        :title="'数字资产介绍'"
        :tit="'Digital multimedia technical'"
        :more="false"
      />
      <div>
        <div class="left">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;著名教育家蔡元培曾说过：“科学与艺术并重。世之有道德者，无不有赖于艺术与科学”。数字媒体技术专业就是这样一个科技与艺术相结合的专业。
          从身临其境的虚拟现实，到亦幻亦真的增强现实，再到眼花缭乱的3D电影特效，乃至极致惊艳的游戏画面，无不依赖着数字媒体技术的支撑和渗透着数字媒体技术的贡献。<br />
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数字媒体技术具有文、理、工、艺等学科交叉特点，是一个技术和艺术结合性很强的专业。
          游戏、动画、视频剪辑与特效、虚拟现实等是此专业的符号。
          掌握数字媒体技能的人才，无疑也拥有视频、三维、平面、网页、动画、后期等多种技能。数字媒体技术专业课程包含影视和三维两大方向。
        </div>
        <div class="right">
          <img src="@/assets/technology.png" alt="" />
        </div>
      </div>
    </div>
    <div class="multimedia" ref="multimedia">
      <div class="media-item">
        <div>
          <img src="@/assets/media1.png" />
        </div>
        <div class="media-info">
          数字资产<br />
          相关论文
        </div>
      </div>
      <div class="media-item">
        <div>
          <img src="@/assets/media2.png" />
        </div>
        <div class="media-info">
          数字资产<br />
          定义
        </div>
      </div>
      <div class="media-item">
        <div>
          <img src="@/assets/media3.png" />
        </div>
        <div class="media-info">
          数字资产
          <br />
          
        </div>
      </div>
    </div>
  </div>
  <div class="video">
    <Title
      :title="'相关链接'"
      :tit="'Link'"
      :more="false"
    />
    <img src="@/assets/video-bg.png" alt="" />
    <div class="video-item-box">
      <div class="video-item">
        <img src="@/assets/num1.png" alt="" />
        <div class="video-item1">会议活动直播录制</div>
        <div class="video-item2">
          一键式操作流程，记录完整会议内容，方便快捷
        </div>
        <div class="video-item3">会议</div>
      </div>

      <div class="video-item">
        <img src="@/assets/num2.png" alt="" />
        <div class="video-item1">互动直播</div>
        <div class="video-item2">
          在线互动直播内容，知识分享，高效合作
        </div>
        <div class="video-item3">直播</div>
      </div>

      <div class="video-item">
        <img src="@/assets/num3.png" alt="" />
        <div class="video-item1">高清录播/微课自主录制</div>
        <div class="video-item2">自主录制高清课程，规范化录制，清晰可见</div>
        <div class="video-item3">录播</div>
      </div>

      <div class="video-item">
        <img src="@/assets/num4.png" alt="" />
        <div class="video-item1">AI课程资源制作服务</div>
        <div class="video-item2">运用AI教学资源，自动化的制作，高效服务</div>
        <div class="video-item3">制作</div>
      </div>
    </div>
  </div>
  <Footer />


</template>
<script setup lang="ts">
import Nav from "./components/navBar.vue";
import Menu from "./components/menu.vue";
import Swiper from "./components/swiper.vue";
import Fonction from "./components/fonction.vue";
import Footer from "./components/footer.vue";
import Title from "./components/title.vue";
import { onMounted, onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";
import axios from 'axios';
import Items from "./info/items.vue";
const router = useRouter();
onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});


interface NewsItem {
  title: string;
  date: string;
}
interface EventItem {
  title: string;
  date: string;
}
interface AcadItem {
  title: string;
  date: string;
}
interface NoticeItem {
  title: string;
  date: string;
}

const newsItems = ref<NewsItem[]>([]);
const eventItems = ref<EventItem[]>([]);
const acadItems = ref<AcadItem[]>([]);
const noticeItems = ref<NoticeItem[]>([]);
async function fetchNewsItems(): Promise<NewsItem[]> {
  try {
    const response = await axios.post('http://127.0.0.1:5000/news_show',{
      "code":1,
      "class":"新闻动态"},
      {
        headers: {
          'Content-Type': 'application/json'
        },
      }); // 这里应替换为你的API端点
    return response.data;
  } catch (error) {
    console.error('Failed to fetch news items:', error);
    throw error; // 或者你可以返回一个空数组，取决于你的错误处理策略
  }
}

async function fetchEventItems(): Promise<EventItem[]> {
  try {
    const response = await axios.post('http://127.0.0.1:5000/news_show',{
      "code":1,
      "class":"活动预告"},
      {
        headers: {
          'Content-Type': 'application/json'
        },
      }); // 这里应替换为你的API端点
    return response.data;
  } catch (error) {
    console.error('Failed to fetch news items:', error);
    throw error; // 或者你可以返回一个空数组，取决于你的错误处理策略
  }
}

async function fetchAcadItems(): Promise<AcadItem[]> {
  try {
    const response = await axios.post('http://127.0.0.1:5000/news_show',{
      "code":1,
      "class":"学术交流"},
      {
        headers: {
          'Content-Type': 'application/json'
        },
      }); // 这里应替换为你的API端点
    return response.data;
  } catch (error) {
    console.error('Failed to fetch news items:', error);
    throw error; // 或者你可以返回一个空数组，取决于你的错误处理策略
  }
}

async function fetchNoticeItems(): Promise<NoticeItem[]> {
  try {
    const response = await axios.post('http://127.0.0.1:5000/news_show',{
      "code":1,
      "class":"工作通知"},
      {
        headers: {
          'Content-Type': 'application/json'
        },
      }); // 这里应替换为你的API端点
    return response.data;
  } catch (error) {
    console.error('Failed to fetch news items:', error);
    throw error; // 或者你可以返回一个空数组，取决于你的错误处理策略
  }
}

onMounted(async () => {
  try {
    const items = await fetchNewsItems();
    const items2 = await fetchEventItems();
    const items3 = await fetchAcadItems();
    const items4 = await fetchNoticeItems();
    newsItems.value = items;
    eventItems.value = items2
    acadItems.value = items3
    noticeItems.value = items4
  } catch (error) {
    console.error('Failed to fetch news items:', error);
  }
});

function shownews(index: number) {
  let title = newsItems.value[index].title
  localStorage.setItem("newstitle",title)
  const routeData = router.resolve("/newsdetail");
  window.open(routeData.href, "_blank");

}


function showModal(index: number) {
  let title = eventItems.value[index].title
  localStorage.setItem("newstitle",title)
  const routeData = router.resolve("/newsdetail");
  window.open(routeData.href, "_blank");
}

function showacad(index: number) {
  let title = acadItems.value[index].title
  localStorage.setItem("newstitle",title)
  const routeData = router.resolve("/newsdetail");
  window.open(routeData.href, "_blank");
}

function shownotice(index: number) {
  let title = noticeItems.value[index].title
  localStorage.setItem("newstitle",title)
  const routeData = router.resolve("/newsdetail");
  window.open(routeData.href, "_blank");
}


const newsLeft = ref();
const newsRight = ref();
const technology = ref();
const multimedia = ref();
const newsLeftbot = ref();
const newsRightbot = ref();
const handleScroll = () => {
  const sy = window.scrollY;
  if (sy >= 100) {
    newsLeft.value.style.opacity = 1;
    newsLeft.value.style.transform = "translateX(0)";
    newsRight.value.style.opacity = 1;
    newsRight.value.style.transform = "translateX(0)";
  }
  if (sy >= 600) {
    newsLeftbot.value.style.opacity = 1;
    newsLeftbot.value.style.transform = "translateX(0)";
    newsRightbot.value.style.opacity = 1;
    newsRightbot.value.style.transform = "translateX(0)";
  }
  if (sy >= 750) {
    technology.value.style.opacity = 1;
  }
  if (sy >= 1000) {
    multimedia.value.style.opacity = 1;
    multimedia.value.style.transform = "translateY(0)";
  }
};
</script>

<style lang="scss" scoped>
.news-box {
  width: 100%;
  position: relative;
  .news-img {
    width: 100%;
    height: 18.75rem;
    position: absolute;
  }
}
.news {
  margin: 0 auto;
  width: 75rem;
  box-sizing: border-box;
  // padding: 0 22.5rem;
  padding-top: 2.5rem;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
  .news-left {
    flex: 10;
    opacity: 0;
    transform: translateX(-10rem);
    transition: 1s;
    .tran-box {
      width: 35.625rem;
      height: 17.5rem;
      margin-bottom: 1.75rem;
      margin-top: 1.25rem;
      position: relative;
      overflow: hidden;
    }
    .news-img {
      width: 35.625rem;
      height: 17.5rem;
      transition: 1.3s;
    }
    .news-img:hover {
      transform: scale(1.1);
    }
  }
  .news-center {
    flex: 2;
  }
  .news-right {
     width: 37.625rem;
    // height: 17.5rem;
    opacity: 0;
    transform: translateX(10rem);
    transition: 1.5s;
    flex: 10;
    .right-box {
      height: 27rem;
      overflow: hidden;
      margin-top: 1.25rem;
      background-color: #fff;
      box-sizing: border-box;
      padding: 0 1.5rem;
    }
  }

  .news-leftbot {
    flex: 10;
    opacity: 0;
    transform: translateX(-10rem);
    transition: 1s;
    .tran-box {
      width: 35.625rem;
      height: 0rem;
      margin-bottom: 1.75rem;
      margin-top: 0rem;
      position: relative;
      overflow: hidden;
    }
  }

  .new-item {
    border-bottom: 0.0625rem solid #e9ebee;
    display: flex;
    justify-content: space-between;
    :nth-child(1) {
      font-size: 1rem;
      color: #0f2e4d;
      line-height: 3.75rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      width: 18.75rem;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      cursor: pointer;
    }
    :nth-child(2) {
      width: 7.5rem;
      margin-left: 1.25rem;
      font-size: 0.875rem;
      color: #96a3b1;
      line-height: 3.75rem;
    }
  }
}
.bg-box {
  width: 100%;
  position: relative;
  margin-top: 2.5rem;
  .bg-img {
    position: absolute;
    width: 100%;
    height: 31.25rem;
  }
}
.technology {
  // min-height: 12.5rem;
  margin: 0 auto;
  width: 75rem;
  box-sizing: border-box;
  padding: 2.5rem 0 3.75rem;
  opacity: 0;
  transition: 1s;
  > div {
    display: flex;
    margin-top: 1.4375rem;
    .left {
      flex: 1;
      padding-top: 0.625rem;
      padding-right: 1.875rem;
      padding-bottom: 1.625rem;
      box-sizing: border-box;
      height: 16.25rem;
      font-weight: 400;
      font-size: 1rem;
      color: #0f2e4d;
      line-height: 2rem;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .right {
      width: 37.5rem;
      height: 16.25rem;
      overflow: hidden;
      position: relative;
      img {
        width: 37.5rem;
        height: 16.25rem;
        transition: 1.3s;
      }
      img:hover {
        transform: scale(1.1);
      }
    }
  }
}

.multimedia {
  margin: 0 auto;

  width: 75rem;
  // padding: 0 22.5rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(6.25rem);
  transition: 1s;
  .media-item {
    width: 23.75rem;
    height: 7.5rem;
    display: flex;
    > div {
      width: 11.25rem;
      height: 7.5rem;
      overflow: hidden;
      img {
        width: 11.25rem;
        height: 7.5rem;
        transition: 1s;
      }
      img:hover {
        transform: scale(1.1);
      }
    }
    .media-info {
      display: flex;
      align-items: center;
      font-size: 1.125rem;
      color: #0f2e4d;
      line-height: 2rem;
      padding-left: 1.875rem;
      box-sizing: border-box;
    }
  }
}

.video {
  width: 75rem;
  box-sizing: border-box;
  padding: 5rem 0 3.75rem;
  img {
    width: 100%;
    margin-top: 1.25rem;
  }
  .video-item-box {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: -8.125rem;
  }
  .video-item {
    width: 15.625rem;
    height: 18.75rem;
    background-color: #fff;
    box-sizing: border-box;
    padding: 2.375rem 1.875rem;
    img {
      width: 3rem;
      height: 2.8125rem;
    }
    .video-item1 {
      font-weight: 600;
      font-size: 1.125rem;
      color: #0f2e4d;
      line-height: 1.5625rem;
      margin-top: 1.0625rem;
    }
    .video-item2 {
      font-size: 0.875rem;
      color: #8c9aa8;
      line-height: 1.25rem;
      margin-top: 0.5rem;
    }
    .video-item3 {
      width: 5rem;
      height: 2.25rem;
      border: 0.0625rem solid #0f2e4d;
      text-align: center;
      line-height: 2.25rem;
      font-size: 1rem;
      color: #0f2e4d;
      margin-top: 2.5rem;
      cursor: pointer;
    }
  }
}
</style>
